<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>h5-form</title>
</head>
<body>
<form>
    <div>
        <label>邮件地址:</label><input type="email"/>
        <label>年龄:</label><input type="number"/>
        <label>网站地址:</label><input type="url"/>
        <input type="range" min="1"  max="100" id="range"/>
        <input type="date" id="date"/>
        <input type="week"/>
        <input type="color" id="color"/>
    </div>

</form>

<div>
    <button id="btnValue">获取range的value</button>
</div>
</body>
<script>

    document.getElementById('btnValue').onclick=function () {
        var rangeVal = document.getElementById('date').value;
        alert(rangeVal);
    }

</script>
</html>